<template>
  <div>
    <div class="m-b-20" v-if="addShow">
      <router-link class="btn-link-large add-btn" to="edit">
        <i class="el-icon-plus"></i>&nbsp;&nbsp;添加规则
      </router-link>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="selectItem">
      <el-table-column
          type="selection"
          :context="_self"
          width="50">
      </el-table-column>
      <el-table-column
          prop="title"
          label="显示名">
      </el-table-column>
      <el-table-column
          prop="route"
          label="路由"
          width="200">
      </el-table-column>
      <el-table-column
          label="状态"
          width="50">
        <template slot-scope="scope">
          {{ scope.row.status | status}}
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="200">
        <template slot-scope="scope">
          <div>
            <span v-if="editShow">
              <router-link :to="{ name: 'ruleEdit', params: { id: scope.row.id }, query: { id: scope.row.id }}">
                <el-button
                    size="small"
                    type="primary">
                编辑
                </el-button>
              </router-link>
            </span>
            <span v-if="deleteShow">
              <el-button
                  size="small"
                  type="danger"
                  @click="confirmDelete(scope.row)">
              删除
              </el-button>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pos-rel p-t-20">
      <btnGroup :selectedData="multipleSelection" :type="'rules'"></btnGroup>
    </div>
  </div>
</template>

<script>
  import btnGroup from '../../Common/btn-group.vue'
  import http from '../../../assets/js/http'
  import _g from '@/assets/js/global'
  import { Button, Table, TableColumn } from 'element-ui'
  Vue.use(Button)
  Vue.use(Table)
  Vue.use(TableColumn)

  export default {
    data() {
      return {
        tableData: [],
        multipleSelection: []
      }
    },
    methods: {
      selectItem(val) {
        this.multipleSelection = val
      },
      confirmDelete(item) {
        this.$confirm('确认删除该权限?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _g.openGlobalLoading()
          this.apiDelete('admin/memberRule/', item.id).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '删除成功')
              setTimeout(() => {
                _g.shallowRefresh(this.$route.name)
              }, 1500)
            })
          })
        }).catch(() => {
          // handle error
        })
      }
    },
    created() {
      this.apiGet('admin/memberRule', { 'limit': 500 }).then((res) => {
        this.handelResponse(res, (data) => {
          this.tableData = data.list
        })
      })
    },
    computed: {
      addShow() {
        return _g.getHasRule('rules-save')
      },
      editShow() {
        return _g.getHasRule('rules-update')
      },
      deleteShow() {
        return _g.getHasRule('rules-delete')
      }
    },
    components: {
      btnGroup
    },
    mixins: [http]
  }
</script>
